<template>
    <div class="user-manage">
        <div class="manage-search">
            <yh-input placeholder="编号/账号/昵称" v-model="selectInput" size="mini"></yh-input>
            <yh-button type="primary" size="mini" @click="getUserList">
                查询
            </yh-button>
        </div>
        <div class="user-tables">
            <!-- 表格 -->
            <div class="user-tables-div">
                <vxe-table
                    ref="multipleTable"
                    :data="tableData"
                    style="width: 100%"
                    border
                    height="100%"
                    v-tableTop="currentPage"
                    :edit-config="{ trigger: 'click', mode: 'cell', showIcon: false }"
                    show-overflow
                    resizable
                    auto-resize
                    @edit-actived="handleReset"
                >
                    <vxe-column field="userCode" title="用户编号" show-overflow> </vxe-column>
                    <vxe-column field="userName" title="用户账号" show-overflow> </vxe-column>
                    <vxe-column field="userNickName" title="用户昵称" show-overflow> </vxe-column>
                    <vxe-column title="管理员" width="120" show-overflow>
                        <template slot-scope="scope">
                            <span v-if="scope.row.superuser">是</span>
                            <span v-else>否</span>
                        </template>
                    </vxe-column>
                    <vxe-column field="operatorCode" title="恒生用户账号" :edit-render="{}">
                        <template #default="{ row }">
                            <span>{{ row.operatorCode }}</span>
                        </template>
                        <template #edit="{ row }">
                            <el-select v-model="row.operatorCode" filterable size="mini" @change="handleOperatorChange($event, row)" clearable>
                                <el-option
                                    v-for="item in operatorData"
                                    :key="item.dictKey"
                                    :value="item.dictKey"
                                    :label="item.dictKey + ' ' + item.dictKeyName"
                                ></el-option>
                            </el-select>
                        </template>
                    </vxe-column>
                    <vxe-column field="operatorName" title="恒生用户名"> </vxe-column>
                    <vxe-column field="modifyDate" title="修改日期" width="120" show-overflow-tooltip align="center" sortable>
                        <template slot-scope="scope">
                            {{ dateFormat(scope.row.modifyDate) }} {{ timeFormat(scope.row.modifyTime) }}
                        </template>
                    </vxe-column>
                </vxe-table>
            </div>

            <!-- 分页 -->
            <div class="block">
                <risk-pagination :paging="paging" @page-change="currentChange"></risk-pagination>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import { Component, Emit, Model, Prop, Vue } from 'vue-property-decorator';
import md5 from 'js-md5';
import { AuthenticationMd5Key, getUser } from '@/utils/user-util';
import { getCurrentPageData, timeFormat, dateFormat } from '@/utils/tools';
import RiskTrantable from '@/common/components/risk-trantable.vue';
import RiskCustomSelect from '@/common/components/risk-custom-select.vue';
import RiskPagination from '@/common/components/risk-pagination.vue';
import { addUserData, resourceList } from './auth-manage/tables';
import moment from 'moment';

@Component({
    name: 'UserRelation',
    components: {
        RiskTrantable,
        RiskCustomSelect,
        RiskPagination,
    },
})
export default class UserRelation extends Vue {
    private timeFormat = timeFormat;
    private dateFormat = dateFormat;
    // 列表展示数据
    private tableData: any[] = [];
    // 总数据
    private tabsDataInfo: any;
    // 过滤后的数据
    private sumDataInfo: any;

    paging: any = {
        currentPage: 1,
        pageSize: 25,
        total: 0,
    };
    // private passWord: string = '';
    private selectInput: string = '';
    operatorData: any[] = []; // 恒生用户名下拉数据
    // 更新表单
    updateForm: any = {
        modifyDate: 0,
        modifyTime: 0,
        operatorCode: '',
        userCode: '',
    };

    created() {
        this.getUserList();
        this.queryOperatorList();
    }

    private getUserList(): void {
        this.$axios.post('/userRelation/list?query=' + this.selectInput).then((res: any) => {
            if (res) {
                this.tabsDataInfo = res;
                this.sumDataInfo = this.tabsDataInfo;
                this.tableData = getCurrentPageData(res, this.paging.currentPage, this.paging.pageSize);
                this.paging.total = this.sumDataInfo.length;
            }
        });
    }

    // 查询恒生用户账号
    private queryOperatorList() {
        this.$axios.get('/dict/getOutOperator').then((res: any) => {
            this.operatorData = res;
        });
    }

    // 分页
    private currentChange(val?: number): void {
        if (val) {
            this.paging.currentPage = val;
        }
        this.tableData = getCurrentPageData(this.sumDataInfo, this.paging.currentPage, this.paging.pageSize);
    }

    handleOperatorChange(val: string, row: any) {
        // this.operatorData.forEach(ele => {
        //     if (ele.dictKey == val) {
        //         row.operatorName = ele.dictKeyName;
        //     }
        // });
        // if (!row.operatorCode) {
        //     return;
        // }
        this.updateForm.userCode = row.userCode;
        this.updateForm.operatorCode = row.operatorCode;
        this.updateForm.modifyDate = Number(moment().format('YYYYMMDD')); // 当前日期
        this.updateForm.modifyTime = Number(moment().format('HHmmss')); // 当前时间
        this.$axios
            .post('/userRelation/addOrUpdate', this.updateForm)
            .then(res => {
                this.yh_message_success('更新成功');
                this.getUserList();
            })
            .catch(err => {
                this.yh_message_error(err);
            });
    }

    handleReset() {
        this.updateForm = {
            modifyDate: 0,
            modifyTime: 0,
            operatorCode: '',
            userCode: '',
        };
    }

    handleSave({ row }) {
        // if (!row.operatorCode) {
        //     return;
        // }
        // this.updateForm.userCode = row.userCode;
        // this.updateForm.operatorCode = row.operatorCode;
        // this.updateForm.modifyDate = Number(moment().format('YYYYMMDD')); // 当前日期
        // this.updateForm.modifyTime = Number(moment().format('HHmmss')); // 当前时间
        // this.$axios
        //     .post('/userRelation/addOrUpdate', this.updateForm)
        //     .then(res => {
        //         this.yh_message_success('更新成功');
        //         this.selectUserInfo();
        //     })
        //     .catch(err => {
        //         this.yh_message_error(err);
        //     });
    }
}
</script>
<style lang="scss" scoped>
.user-manage {
    height: 100%;
    .manage-search {
        display: flex;
        border: 1px solid #eee;
        padding: 8px;

        .input-container {
            width: 200px;
            margin-right: 30px;
        }
    }

    .user-tables {
        height: calc(100% - 100px);
        & /deep/ .el-pagination {
            padding: 15px 0 0 0 !important;
        }

        .user-tables-div {
            height: 100%;
            & /deep/ .el-button--mini {
                padding: 2px 8px !important;
            }
        }
    }
}
</style>
